<template>
  <div class="container">
    <el-row>
      <el-col :span="8" style="float: left">
        <el-input v-model="search" placeholder="请输入关键字">
          <el-button :loading="searchLoading" slot="append" icon="el-icon-search" @click="toSearch" />
        </el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8" v-for="(o, index) in allData.length" :key="o" :offset="index > 0 ? 0 : 0">
        <el-card :body-style="{ padding: '0px' }">
          <img :src="allData[index].picUrl" class="image">
          <div style="padding: 14px;">
            <span>{{allData[index].title}}</span>
            <div class="bottom clearfix">
              <time class="time">{{ allData[index].ctime }}</time>
              <el-button type="text" class="button" @click="open(index)">详情信息</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-dialog
      :modal-append-to-body="false"
      title="新闻描述"
      :visible.sync="isOpen"
      width="30%"
      center>
      <span>&nbsp;&nbsp;&nbsp;&nbsp;{{description}}</span><br><br>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isOpen = false">取 消</el-button>
        <el-button type="primary" @click="isOpen = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {},
  data () {
    return {
      search: '河北',
      searchLoading: false,
      currentDate: new Date(),
      allData: [],
      isOpen: false,
      description: ''
    }
  },
  computed: {},
  watch: {},
  created () {
    // this.getData()
  },
  mounted () {},
  methods: {
    toSearch () {
      console.log('搜索', this.search)
      this.getData()
    },
    getData () { // http://api.tianapi.com/txapi/ncovcity/index?key=62e34ad34025d5d5127135efa58d4ca8 疫情接口 暂时维护
      this.$axios.get(`http://api.tianapi.com/topnews/index?key=acc54cc8991613d1ef9f79b5b536b8f9&word=${this.search}`).then(res => {
        console.log('地方头条', res)
        this.allData = res.data.newslist
        // console.log('allData', this.allData)
      }).catch(err => {
        console.log(err)
      })
    },
    open (index) {
      this.isOpen = !this.isOpen
      this.description = this.allData[index].description
    }
  }
}
</script>

<style scoped lang="scss">
.time {
  font-size: 13px;
  color: #999;
}

.el-card {
  height: 400px;
  margin: 10px;
}
.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 400px;
  height: 280px;
  display: block;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both
}
</style>
